<template>
  <view class="container">
    <h3>配置效果</h3>
    <view class="config-result">
      <view :style="containerStyles">
        <view :style="configStyles">
          <text :style="scrollStyles">{{ text }}</text>
        </view>
      </view>
    </view>
    <view class="config-options">
      <view class="option-group">
        <text>背景颜色</text>
        <view class="colors">
          <button v-for="color in bgColors" :key="color" @click="setBackgroundColor(color)" :class="[{active: color === bgColor },'basics-button']">
            {{ color === '#ff0000' ? '红' : color === '#808080' ? '灰' : color === '#ffff00' ? '黄' : color === '#d3d3d3' ? '浅灰' : '' }}
          </button>
		  <button @click="showColorPicker('bg')" class="custom-button">+自定义</button>
        </view>
      </view>
      <view class="option-group">
        <text>文字颜色</text>
        <view class="colors">
          <button v-for="color in textColors" :key="color" @click="setTextColor(color)" :class="[{ active: color === textColor },'basics-button']">
            {{ color === '#ff0000' ? '红' : color === '#808080' ? '灰' : color === '#ffff00' ? '黄' : color === '#d3d3d3' ? '浅灰' : '' }}
          </button>
		 <button @click="showColorPicker('text')" class="custom-button">+自定义</button>
        </view>
      </view>
      <view class="option-group">
        <text>移动速度 {{ speed }} px/1s</text>
        <input type="range" min="1" max="10" v-model="speed" @input="updateDuration"/>
      </view>
      <view class="option-group">
        <text>显示位置</text>
        <view class="positions">
          <button v-for="position in positions" :key="position" @click="setPosition(position)" :class="[{ active: position === currentPosition },'basics-button']">
            {{ position }}
          </button>
        </view>
      </view>
    </view>
    <view v-if="showPicker" class="color-picker-overlay" @click="closeColorPicker">
      <view class="color-picker" @click.stop>
        <input type="color" v-model="colorPickerValue" @input="applyColor" />色盘
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      text: '今天下午8点请到会议室开会',
      bgColor: '#ff0000',  // 默认背景颜色为红色
      textColor: '#ffff00',  // 默认文字颜色为黄色
      speed: 50,
      currentPosition: '上',
      showPicker: false,
      pickerType: '',
      colorPickerValue: '#ffffff',
      bgColors: ['#ff0000', '#808080', '#ffff00', '#d3d3d3'],
      textColors: ['#ff0000', '#808080', '#ffff00', '#d3d3d3'],
      positions: ['上', '中', '下', '左', '右'],
	  containerWidth: 300, // 动态获取容器宽度
    };
  },
  computed: {
    containerStyles() {
      return {
        width: '100%',
        height: '100%',
        display: 'flex',
        alignItems: this.currentPosition === '上' ? 'flex-start' : this.currentPosition === '下' ? 'flex-end' : 'center',
        justifyContent: this.currentPosition === '左' ? 'flex-start' : this.currentPosition === '右' ? 'flex-end' : 'center',
        position: 'relative',
      };
    },
    configStyles() {
      return {
        backgroundColor: this.bgColor,
        color: this.textColor,
        overflow: 'hidden',
        display: 'flex',
        width: this.currentPosition === '上' || this.currentPosition === '中' || this.currentPosition === '下' ? '100%' : '20px',
        height: this.currentPosition === '左' || this.currentPosition === '右' ? '100%' : '20px',
      };
    },
    scrollStyles() {
		const duration = this.containerWidth / this.speed;
      let keyframes = '';
      if (this.currentPosition === '左' || this.currentPosition === '右') {
        keyframes = `
          @keyframes scroll-vertical {
            0% { transform: translateY(-100%); }
            100% { transform: translateY(100%); }
          }
        `;
      } else {
        keyframes = `
          @keyframes scroll-horizontal {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(100%); }
          }
        `;
      }
      const styleSheet = document.styleSheets[0];
      styleSheet.insertRule(keyframes, styleSheet.cssRules.length);
      return {
        width: '100%',
        height: '100%',
        animation: this.currentPosition === '左' || this.currentPosition === '右' ? `scroll-vertical ${duration}s linear infinite` : `scroll-horizontal ${duration}s linear infinite`,
        whiteSpace: this.currentPosition === '左' || this.currentPosition === '右' ? 'pre-wrap' : 'nowrap',
      };
    },
  },
  methods: {
	updateDuration() {
	      // 使用uni.createSelectorQuery获取元素宽度
	      uni.createSelectorQuery()
	        .in(this)
	        .select('.config-result')
	        .boundingClientRect((data) => {
	          if (data) {
	            this.containerWidth = data.width;
	          }
	        })
	        .exec();
	    },
    setBackgroundColor(color) {
      this.bgColor = color;
    },
    setTextColor(color) {
      this.textColor = color;
    },
    setPosition(position) {
      this.currentPosition = position;
    },
    showColorPicker(type) {
      this.pickerType = type;
      this.colorPickerValue = type === 'bg' ? this.bgColor : this.textColor;
      this.showPicker = true;
    },
    applyColor(event) {
      const color = event.detail.value;
		// console.log(event.detail.value)
      if (this.pickerType === 'bg') {
        this.setBackgroundColor(color);
      } else if (this.pickerType === 'text') {
        this.setTextColor(color);
      }
    },
    closeColorPicker() {
      this.showPicker = false;
    },
  },
  mounted() {
    this.updateDuration();
    // 在窗口大小变化时更新宽度
    uni.onWindowResize(this.updateDuration);
  },
  beforeDestroy() {
    // 移除窗口大小变化的监听器
    uni.offWindowResize(this.updateDuration);
  },
};
</script>


<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.config-result {
  border: 1px solid #000;
  width: 80%;
  height: 200px;
  position: relative;
  overflow: hidden;
  margin-bottom: 20px;
}
.option-group {
	
  margin: 20px 0;
  text-align: center;
}
.colors {
 display: flex;
  flex-wrap: wrap;
  display: flex;
  justify-content: center;
  margin: 10px 0;
}
.colors .basics-button, .positions .basics-button {
	display: flex; /* 将按钮转换为Flex容器 */
	align-items: center; /* 垂直居中对齐内容 */
	justify-content: center; /* 水平居中对齐内容*/
	margin: 5px;
	width: 70px; 
	border-radius: 3px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
	height: 30px;
	font-size: 12px;
	color: #d2d2d2;
	background-color: #f7f7f7;
}
.custom-button {
	
	display: flex; /* 将按钮转换为Flex容器 */
	align-items: center; /* 垂直居中对齐内容 */
	justify-content: center; /* 水平居中对齐内容*/
	margin: 5px;
	width: 90%; 
	border-radius: 3px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
	height: 30px;
	font-size: 12px;
	color: #d2d2d2;
	background-color: #f7f7f7;
}

.positions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.positions button {
  background-color: #f0f0f0;	
}
.colors .active {
  background-color: #000;
  color: #fff;
}
.positions .active {
  background-color: #000;
  color: #fff;
}
.color-picker-overlay {
  position: fixed;
  top: 0;
  left: -50%;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5);
}
.color-picker {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
}


</style>
